<template>
  <el-container>
    <el-header>
      <div class="header-content">晨旭数据大屏综合展示系统</div>
      <div>
        <div class="username">
          hi~你好

          <el-button round style="margin-left: 30px" @click="gologin"
            >退出登录</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="screen">
        <ul>
          <li
            v-for="(item, index) in cardlist.value"
            :key="item.url"
            @click="godetails(item.url,item.title)"
          >
            <el-card :body-style="{ padding: '0px' }" style="cursor: pointer">
              <img :src="item.img" class="image" />
              <div style="padding: 14px">
                <span>{{ item.title }}</span>
              </div>
            </el-card>
          </li>
        </ul>
      </div>
    </el-main>
  </el-container>
  <div class="foot">技术支持：广州市晨旭教育评估有限公司</div>
</template>

<script lang="ts" setup>
import pzimg from "../../assets/pz.jpg";
import qgzzimg from "../../assets/qgzz.jpg";
import gdszzimg from "../../assets/gdszz.jpg";
import xmqkimg from "../../assets/xmqk.jpg";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  watch,
  ref,
  onMounted,
  onDeactivated,
  computed,
} from "vue";
let $router = useRouter();

let cardlist: any = reactive({
  value: [
    {
      title: "2021-2022学年普职比对现状",
      img: pzimg,
      url: "/pz",
    },
    {
      title: "全国中等职业学校实况大屏",
      img: qgzzimg,
      url: "/qgzz",
    },
    {
      title: "广东省中等职业基础数据",
      img: gdszzimg,
      url: "/gdszz",
    },
    {
      title: "项目数据情况分析",
      img: xmqkimg,
      url: "/xmqk",
    },
  ],
});

const godetails = (path: string,title:string) => {
  // $router.push(path);
  let test = window.open(path, "_blank");
  test.onload = function () {
    test.document.title =title
  };
};

const gologin = () => {
  localStorage.clear();
  $router.push("/login");
};
</script>

<style scoped lang="scss">
.header-main {
  width: 100%;
  height: 80px;
  padding-left: 50px;
  color: #fff;
  .username {
    display: inline-block;
    color: black !important;
    padding: 0 50px;
  }
}
.header-content {
  font-size: 30px;
  margin-left: 50px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #4d71ff;
}
.screen {
  width: 1400px;
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;

  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  display: block;
  height: 200px;
  width: 300px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 300px;
    height: 300px;
    list-style: none;
    margin: 0 25px;
  }
}
.el-card {
  cursor: pointer;
}
.el-header {
  display: flex;
  justify-content: space-between;
  line-height: 80px;
  height: 80px;
  padding: 0 150px;
  box-shadow: 0 1px 3px #5f5d5daf;
}
.el-main {
  background: #f6f8ff;
  height: calc(100vh - 80px);
  overflow: auto;
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #d1d2d4af;
}
</style>
